<template>
  <div class="container">
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="4"
      :space-between="10"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"    
    > 
      <swiper-slide v-for="banner in banners" :key="banner.id">
        <WCard :goodInfo='banner'/>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev swiper-button"></div>
    <div class="swiper-button-next swiper-button">></div>
  </div>
</template>

<script lang="ts">
  export default {
    name: "WCarousel",
  };
</script>

<script lang="ts" setup>
  import WCard from "./Card/index.vue";
  import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper";
  import { Swiper, SwiperSlide } from "swiper/vue";
  import "swiper/css";
  import { useHomeStore } from "@/stores/modules/home";
  import { storeToRefs } from "pinia";
  import { onMounted } from "vue";
  const homeStore = useHomeStore();
  const { getBanners } = homeStore;
  const { banners } = storeToRefs(homeStore);
  // import "swiper/css/navigation";
  onMounted(() => {
    getBanners();
  });
  const modules = [Autoplay, Navigation];
</script>

<style scoped lang="less">
  .container {
    position: relative;
    width: 1090px;
    margin: 0 auto;
  }
  .swiper-button {
    width: 50px;
    height: 50px;
    background-color: #e2c199;
    position: absolute;
    border-radius: 50%;
    line-height: 47px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    &:hover{
      background-color: #CC9756;
    }
  }
  .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    left: -60px;
    &::before {
      content: "<";
    }
  }
  .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    right: -60px;
  }
  .swiper-item {
    width: 265px;
    height: 365px;
    background-color: red;
  }
</style>
